import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:pwd_keeper/global.dart';
import 'package:pwd_keeper/router/application.dart';

class PwdKeeperItem extends StatefulWidget {
  PwdKeeperItem({Key key, @required this.pwdKeeper}) : super(key: key);
  final pwdKeeper;

  @override
  _PwdKeeperItemState createState() => _PwdKeeperItemState();
}

class _PwdKeeperItemState extends State<PwdKeeperItem> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        var keeper = Uri.encodeComponent(json.encode(widget.pwdKeeper));
        Application.router.navigateTo(
          context,
          '/keeper_detail_page?keeper=$keeper',
        );
      },
      child: Column(
        children: [
          Container(
            width: MediaQuery.of(context).size.width - 200,
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  color: Global.fontSecondColor.withOpacity(0.08),
                  width: 1,
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.all(10),
            margin: EdgeInsets.only(bottom: 10),
            decoration: BoxDecoration(
              color: Global.cardBackgroundColor,
              borderRadius: BorderRadius.all(Radius.circular(5)),
            ),
            child: Row(
              children: <Widget>[
                Container(
                  child: Image.asset(
                    'assets/images/${widget.pwdKeeper['icon']}.png',
                    width: 40,
                  ),
                ),
                SizedBox(width: 20),
                Container(
                  width: MediaQuery.of(context).size.width - 140,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        widget.pwdKeeper['account'],
                        style: TextStyle(
                          color: Global.fontColor,
                          fontWeight: FontWeight.w600,
                          fontSize: 14,
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                      Text(
                        widget.pwdKeeper['desc'],
                        style: TextStyle(
                          color: Global.fontSecondColor,
                          fontWeight: FontWeight.w500,
                          fontSize: 12,
                        ),
                        maxLines: 3,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
